<template>
  <div class="page-container">
    <h2>只翻译注释列(-- 后面的)</h2>

    <el-input
      type="textarea"
      :autosize="{ minRows: 4 }"
      placeholder="请输入内容"
      v-model="text"
    >
    </el-input>

    <el-button class="fanyiBtn" @click="fy" type="primary">翻译</el-button>
    <el-button
      class="tag-read"
      type="primary"
      v-if="fanyi_text"
      @click="copy('.fanYiBox')"
      >复制代码</el-button
    >

    <div
      class="fanYiBox"
      contenteditable="true"
      v-html="fanyi_text"
      style="white-space: pre-wrap"
    ></div>
    <!-- <div class="fanYiBox" style="white-space: pre-wrap;">
      {{fanyi_text}}
    </div> -->
  </div>
</template>

<script>
import MD5 from "./md5";
import crypto from "./crypto-js";
import axios from "axios";

export default {
  name: "Login",
  data() {
    return {
      text: "",
      tenant_access_token: "",
      fanyi_text: "",
      time: 0,
    };
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.tenant_access_token = this.$store.getters.tenant_access_token;
    }, 1000);

    setInterval((res) => {
      this.time--;
    }, 1000);
  },
  methods: {
    copy(cls) {
      // 创建一个新的 textarea 元素
      var textArea = document.createElement("textarea");

      // 设置 textarea 的内容为 div 的文本内容
      textArea.value = this.fanyi_text;

      // 将 textarea 添加到文档中
      document.body.appendChild(textArea);

      // 选中 textarea 中的文本
      textArea.select();

      // 复制选定的文本到剪切板
      document.execCommand("copy");

      // 移除 textarea 元素
      document.body.removeChild(textArea);
      this.$message({
        message: "已复制到剪切板，Ctrl + v去吧！！",
        type: "success",
      });
      // let clipboard = new Clipboard(cls)
      // clipboard.on('success', e => {
      //     console.log('复制成功',clipboard)
      //     this.$message({
      //       message: '已复制到剪切板，Ctrl + v去吧！！',
      //       type: 'success'
      //     });
      //     //  释放内存
      //   clipboard.destroy();
      // })
      // clipboard.on('error', e =>{
      //   // 不支持复制
      //   console.log('该浏览器不支持复制',clipboard)
      //   // 释放内存
      //   clipboard.destroy()
      // })
    },
    get_zs_str(inputString) {
      // 输入字符串
      // var inputString = "这是一个示例字符串 -- 这是要截取的部分";

      // 使用split方法拆分字符串
      var parts = inputString.split("--");
      var result;
      // 检查是否成功拆分
      if (parts.length > 1) {
        // parts[0] 包含 -- 之前的部分
        // parts[1] 包含 -- 后面的部分
        result = parts[1].trim(); // 使用trim()去除前后空白

        console.log("截取的字符串: " + result);
      } else {
        console.log("未找到 -- 分隔符");
      }

      return result;
    },

    async fy() {
      if (this.time > 0) {
        return;
      }
      this.time = 3;
      // console.log('要翻译内容',this.text)
      let list = this.text.split(`
`);

      var ts_text = "+-+";

      var fy_obj = {};
      fy_obj[0] = {
        str: "",
        indexList: [],
        allindex: [],
      };
      var fy_index = 0;
      var allindex = 0;
      for (let [index, item] of list.entries()) {
        var str2 = this.get_zs_str(item);
        if (str2 && !str2.includes("[[") && !str2.includes("]]")) {
          // 替换掉文本中所有的"
          str2 = str2.replace(new RegExp('"', "g"), "'");

          if (fy_obj[fy_index].str.length > 800) {
            fy_index++;
          }

          if (!fy_obj[fy_index]) {
            fy_obj[fy_index] = {
              str: "",
              indexList: [],
              allindex: [],
            };
          }

          fy_obj[fy_index].str += str2 + ts_text;
          fy_obj[fy_index].indexList.push(index);

          fy_obj[fy_index].allindex.push(allindex);
          allindex++;
        }
      }

      // 定义一个用于延迟的 Promise 函数
      function delay(ms) {
        return new Promise((resolve) => setTimeout(resolve, ms));
      }

      // for (const iterator of fy_obj) {
      console.log(fy_obj);
      for (var key in fy_obj) {
        let iterator = fy_obj[key];
        console.log(iterator);
        let str = iterator.str;
        let indexList = iterator.indexList;
        let allindex = iterator.allindex;

        console.log("要翻译内容", str.length, str);

        var appid = "20240228001976342";
        var key = "kq9wCrZIyZeCncedxYYi";
        var salt = new Date().getTime();
        // var query = "-- something was added to our seat!";
        // 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
        var from = "en";
        var to = "zh";

        var str1 = appid + str + salt + key;
        var sign = MD5(str1);

        console.log("MD5 > ", sign);
        function paramsToQueryString(params) {
          const searchParams = new URLSearchParams(params);
          return searchParams.toString();
        }

        const queryString = paramsToQueryString({
          q: str,
          appid: appid,
          salt: salt,
          from: from,
          to: to,
          sign: sign,
        });

        // console.log(queryString); // 输出：name=John&age=30&city=New%20York
        await this.$Leancloud.dataRequest
          .postGet({
            params_obj: {
              url:
                "http://api.fanyi.baidu.com/api/trans/vip/translate?" +
                queryString,
            },
          })
          .then((res) => {
            let text = res.trans_result[0].dst
            console.log("百度翻译 》 ", res,text);
            
            let list02 = text.split(ts_text);
            console.log("翻译内容", text, list02);
            for (let [index, item] of list02.entries()) {
              // list[indexList[index]] = '-- ' + item
              // 获取下标
              var list_index = indexList[index] + allindex[index];

              console.log(
                indexList[index],
                allindex[index],
                list_index,
                list[list_index],
                list
              );

              if (indexList[index] != undefined) {
                item = "-- " + item;

                // 获取str1前导空格和制表符的数量
                var leadingWhitespace = list[list_index].match(/^\s*/)[0];

                // 使用leadingWhitespace将相同的前导空格和制表符添加到str2前面
                item = leadingWhitespace + item;

                list.splice(list_index, 0, item);
              }
            }
          });

        // axios({
        //   url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
        //   type:'get',
        //   async:true,
        //   timeout:5000,
        //   headers:{
        //     // 'x-api-key' : 'A7B1FD4rU0KSncxyK1WSA/kICGQY5fV1PlsbssAbSoboVAls'
        //   },
        //   data: {
        //         q: query,
        //         appid: appid,
        //         salt: salt,
        //         from: from,
        //         to: to,
        //         sign: sign
        //   },
        //   dataType:'jsonp',    //返回的数据格式：json/xml/html/script/jsonp/text
        //   success:function(data){
        //       console.log(data);
        //       console.log('百度翻译 》 ',data);
        //   },
        //   error:function(xhr,textStatus){
        //       console.log("请求失败");
        //   }
        // })

        // $.ajax({
        //     url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
        //     type: 'get',
        //     dataType: 'jsonp',
        //     data: {
        //         q: query,
        //         appid: appid,
        //         salt: salt,
        //         from: from,
        //         to: to,
        //         sign: sign
        //     },
        //     success: function (data) {
        //         console.log(data);
        //     }
        // });

        // await this.$Leancloud.dataRequest.postGet({
        //   url:`https://open.feishu.cn/open-apis/translation/v1/text/translate`,
        //   headers:{"Authorization": 'Bearer '+ this.tenant_access_token},
        //   method:'POST',
        //   data: {
        //     "source_language": "en",
        //     "text": str,
        //     "target_language": "zh",
        //   }
        // }).then(res=>{
        //   if (res.code != 0) {
        //     this.$message.error('需翻译内容过多请，分批翻译');
        //     return
        //   }
        //   // this.fanyi_text = res.data.text

        //   let list02 = res.data.text.split(ts_text)
        //   console.log('翻译内容',res.data.text,list02)
        //   for (let [ index , item ] of list02.entries()) {
        //     // list[indexList[index]] = '-- ' + item
        //     // 获取下标
        //     var list_index = indexList[index] + allindex[index]

        //     console.log(indexList[index] , allindex[index],list_index,list[list_index],list)
        //     if (indexList[index] != undefined) {

        //       item = '-- ' + item

        //       // 获取str1前导空格和制表符的数量
        //       var leadingWhitespace = list[list_index].match(/^\s*/)[0];

        //       // 使用leadingWhitespace将相同的前导空格和制表符添加到str2前面
        //       item = leadingWhitespace + item;

        //       list.splice(list_index, 0, item);

        //     }
        //   }
        // })

        await delay(1000);
      }

      this.fanyi_text = list.join(`
`);
    },
  },
};
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
.page-container {
  padding: 26px;
}
.fanyiBtn {
  margin: 26px 0;
}
.fanYiBox {
  padding: 26px;
  line-height: 30px;
  background-color: #ccc;
  border-radius: 12px;
  min-height: 60px;
}
</style>
